<template>
	<div>
		<div class="xgcart">
			<router-link to="/cart">
				<p class="oli6">
					&#xe601;
					<span v-show="sum>0">{{sum}}</span>
				</p>
			</router-link>
		</div>
		<ul class="zxhimp">
			<li v-for="foot in foots" @click="getf(foot.mpsId)">
				<router-link to="/sortxiangqing">
					<img :src="foot.picUrl">
				</router-link>
				<p>
					{{foot.name}}
				</p>
				<p>
					￥{{foot.availablePrice}}<span>￥{{foot.price}}</span>
				</p>
				<div class="zxhsortp">
					<div class="zxhsortp1">
						<p>
							<span>{{foot.commentInfo.commentNum}}</span>条评论
						</p>
						<p>
							好评<span>{{foot.commentInfo.goodRate}}%</span>	
						</p>
					</div>
					<p class="oli5" @click="addfoot(foot)">
						&#xe601;
					</p>
				</div>
			</li>
		</ul>
		<transition name="move">
    		<div class="box" v-show="show">
				<p>
					加入购物车成功
				</p>
			</div>
    	</transition>
	</div>
</template>
<script type="text/javascript">
	export default {
		data(){
			return {
				foots:[],
				sum:0,
				show:false
			}
		},
		methods:{
			request1(){
				this.$http({
					url:"http://m.laiyifen.com/api/search/searchList?ut=false&companyId=30&shoppingGuideJson=%7B%22attributeJson%22%3A%5B%5D%7D&brandIds=&promotionIds=&coverProvinceIds=&sortType=10&filterType=&priceRange=&pageNo=1&pageSize=20&platformId=3&areaCode=110114&navCategoryIds=1006024900000013",
				}).then(function(res){
					this.foots=res.body.data.productList
				})
			},
			getf(id){
				this.$store.commit('getfootId',id);
				console.log(this.$store.state.footId)
			},
			addfoot(fo){
				this.show=!this.show;
				if (fo.num) {
					fo.num+=1
				}else{
					fo.num=1
				};
				this.sum++;
				this.$store.commit("addcart",fo)
			}
				
		},
		mounted(){
			this.request1();
		}
	}
</script>
<style type="text/css" scoped>
	.box{
		position: fixed;
		top: 40%;
		left: 25%;
		width: 5rem;
		height: 15%;
		z-index: 300;
		text-align: center;
		background: #ff6900;
		opacity: .6;
		display: none;
	}
	.box>p{
		position: absolute;
		font-size: .4rem;
		top: 40%;
		left: 25%;
	}
	.move-enter,.move-leave-to{
		display: block;
		transform: translate3d(100%, 0, 0)
	}
	.move-enter-active,.move-leave-active{
		display: block;
		animation: atm 1s;
	}
	@keyframes atm{
		0%{
			transform: translate3d(100%, 0, 0)
		}
		90%{
			transform: translate3d(0%, 0, 0)
		}
		100%{
			display: none;
		}
	}
	.oli6>span{
		position: absolute;
		display: inline-block;
		width: .7rem;
		height: .7rem;
		line-height: .7rem;
		top: -30%;
		left: 50%;
		background: #ff6900;
		border-radius: 50%;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.eot');
	  src: url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_grc20zha9fz85mi.svg#iconfont') format('svg');
	}

	@font-face {
	  font-family: 'iconfont';  /* project id 387317 */
	  src: url('//at.alicdn.com/t/font_387317_484y1n5byi6vquxr.eot');
	  src: url('//at.alicdn.com/t/font_387317_484y1n5byi6vquxr.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_387317_484y1n5byi6vquxr.woff') format('woff'),
	  url('//at.alicdn.com/t/font_387317_484y1n5byi6vquxr.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_387317_484y1n5byi6vquxr.svg#iconfont') format('svg');
	}
	.xgcart>a>.oli6{
		font-family: 'iconfont';
		background: #ff6900;
		position: fixed;
		right: 1rem;
		bottom: 3rem;
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
		text-align: center;
		line-height: 1.2rem;
		color: #fff;
		font-size: .6rem;
		opacity: .8;
	}
	.oli5{
		font-family: 'iconfont';
	}
	.zxhimp{
		width: 93%;
		margin-left: 3.5%;
		margin-top: 2.453rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.zxhimp>li{
		margin-top: .2234rem;
		/* margin-left: 3%; */
		width: 48%;
		background: #fff;
	}
	.zxhimp>li>a>img{
		width: 100%;
	}
	.zxhimp>li>p:nth-of-type(1){
		padding-bottom: .74343rem;
		margin-top: .1232rem;
		margin-left: .2rem;
		font-size: .2rem;
	}
	.zxhimp>li>p:nth-of-type(2){
		padding-bottom: .21343rem;
		margin-left: .2rem;
		color: #ff6900;
	}
	.zxhimp>li>p:nth-of-type(2)>span{
		margin-left: .1334rem;
		text-decoration: line-through;
		color: #c6c6c6;
	}
	.zxhsortp{
		padding-bottom: .2043rem;
		margin-left: .3rem;
		width: 85%;
		display: flex;
		color: #999;
		align-items: flex-end;
		justify-content: space-between;
	}
	.zxhsortp1{
		display: flex;
	}
	.zxhsortp1>p:nth-of-type(2){
		margin-left: .22323rem;
	}
	.zxhsortp>.zxhsortp1>p>span,.zxhsortp>p{
		color: #ff6900;
	}
	.zxhsortp>p{
		font-size: .467675rem;
	}
	.zxhsortp1>p:nth-of-type(2){
		display: flex;
	}
</style>